<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :model="formData" label-width="120px" class="demo-form-inline">
					<el-form-item label="网站logo" style="width: 100%" class="form-item-logo">
						<el-button type="success" @click="onOpenUpload">上传logo</el-button>
					</el-form-item>
					<div class="logo_img">
						<el-image style="width: 80px; height: 80px" :src="formData.logo_path">
							<template #placeholder>
								<div class="image-placeholder">
									<i style="font-size: 80px; color: #dedede" class="iconfont icon-15tupianyulan"></i>
								</div>
							</template>
						</el-image>
					</div>
					<el-form-item label="网站slogan" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="网站slogan" clearable></el-input>
					</el-form-item>
					<el-form-item label="网站首页title" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="网站首页title" clearable></el-input>
					</el-form-item>
					<el-form-item label="网站联系方式" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="网站联系方式" clearable></el-input>
					</el-form-item>
					<el-form-item label="facebook地址" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="facebook地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="推特地址" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="推特地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="INS地址" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="INS地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="TIKTOK地址" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="TIKTOK地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="邮箱地址" style="width: 100%">
						<el-input maxlength="200" v-model="formData.keyWord" placeholder="邮箱地址" clearable></el-input>
					</el-form-item>
					<el-form-item label=" " style="width: 100%">
						<el-button type="primary">保存</el-button>
					</el-form-item>
					<!-- <el-row>
						<el-col :span="7"> </el-col>
						<el-col :span="7"> </el-col>
						<el-col :span="7">
							<div style="padding-left: 10px"></div>
						</el-col>
						<el-col :span="3">
							<div style="padding-left: 10px; text-align: right">
								<el-button type="success" @click="setDialogVisible(true)">新增</el-button>
							</div>
						</el-col>
					</el-row> -->
				</el-form>
			</div>
		</el-card>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="maxLength" @submit="getPic" />
	</div>
</template>

<script setup name="systemUser">
import { ElMessage } from 'element-plus';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';

const maxLength = ref(1);
const isShowPicSelector = ref(false);
const formData = ref({
	logo_path: null,
});

const onOpenUpload = () => {
	isShowPicSelector.value = true;
};

const getPic = (pic) => {
	formData.value.logo_path = pic[0].imgUrl;
	console.log(formData.value.logo_path);
};

// 页面加载时
onMounted(() => {});
</script>

<style lang="scss">
.form-item-logo {
	.el-form-item__content {
		flex-direction: column;
		align-items: flex-start;
	}
}
.logo_img {
	padding: 0 0 18px 120px;
}
</style>
